
function choosed(data)
{
    $(".choosedBox").removeClass("choosedBox");
    $(data).addClass("choosedBox");
}
function choosed(data) {
    $(".choosedBox").removeClass("choosedBox");
    $(data).addClass("choosedBox");
}
// 下面是第二个index的四个表
function makeProChart1()
{
    $.ajax({
        type: "get",
        url: "/getGruopPatientNumByTime",
        dataType: "json",
        data:{"province":province},
        success: function(data)
        {
            // console.log("折线图2"+data)
            var x=[],y=[];
            for(var i=0;i<data.length;i++)
            {
                x[i]=data[i].xData;
                y[i]=data[i].yData;

            }
            proChart1('新增本地', x, y, 'rgb(255,123,103)')
        }
    })
}
function makeProChart2()
{
    $.ajax({
        type: "get",
        url: "/getProWzzNumGroupBytime",
        dataType: "json",
        data:{"province":province},
        success: function(data)
        {
            // console.log("折线图2"+data)
            var x=[],y=[];
            for(var i=0;i<data.length;i++)
            {
                x[i]=data[i].xData;
                y[i]=data[i].yData;

            }
            proChart1('新增无症状', x, y, 'rgb(255,123,103)')
        }
    })
}


function makeProChart3() {
    $.ajax({
        type: "get",
        url: "/getProSureGroupBytime",
        dataType: "json",
        data:{"province":province},
        success: function(data)
        {
            // console.log("折线图2"+data)
            var x=[],y=[];
            for(var i=0;i<data.length;i++)
            {
                x[i]=data[i].xData;
                y[i]=data[i].yData;

            }
            proChart1('新增确诊', x, y, 'rgb(255,123,103)')
        }
    })
}

function makeProChart4() {
var data1=[],data2=[],data3=[];
    $.ajax({
        type: "get",
        url: "/getProCSDNum",
        dataType: "json",
        data:{"province":province},
        success: function(data)
        {

            console.log("多折线图:"+data)
            var x=[],y=[];
            for(var i=0;i<data.length;i++)
            {
                console.log(i)
                if((i==0)||(i>0&&x[i-1]!=data[i].xData))
                {
                    x[i]=data[i].xData;
                    //确诊
                    if(data[i].type=="1")
                    {
                        data1.push(data[i].yData);
                        data2.push(0);
                        data3.push(0);
                        //    治愈
                    }else if(data[i].type=="2"){
                        //    死亡
                        data1.push(0);
                        data2.push(data[i].yData);
                        data3.push(0);
                    }else{
                        data1.push(0);
                        data2.push(0);
                        data3.push(data[i].yData);
                    }
                }else
                {
                        if(data[i].type=="1")  data1[i-1]+=(data[i].yData);
                        if(data[i].type=="2")  data2[i-1]+=(data[i].yData);
                        if(data[i].type=='3') data3[i-1]+=(data[i].yData);

                }


            }
            var xx=[];
            xx [0]=x[0];
            var j=0;
            for(var i=1;i<x.length;i++)
            {
                if(typeof (x[i])!="undefined")
                {
                    xx[++j]=x[i]
                }
            }
            proChart2(province+' 累计确诊/治愈/死亡趋势', xx, '确诊',data1,'rgb(232,49,50)','治愈',data2,'rgb(16,174,181)',
                '死亡',data3,'rgb(77,80,84)')
        }
    })

    // proChart2(
    //     province+' 累计确诊/治愈/死亡趋势',
    //     [6.1, 6.2, 6.3, 6.4, 6.5, 6.6, 6.7, 6.8, 6.9, 6.14, 6.15, 6.16, 6.13],
    //     '确诊',
    //     [1, 2, 37, 8, 9, 4, 5, 6, 4, 5, 6, 10, 13, 20],
    //     'rgb(232,49,50)',
    //     '治愈',
    //     [1, 2, 3, 0, 9, 0, 5, 6, 4, 0, 6, 1, 1, 2],
    //     'rgb(16,174,181)',
    //     '死亡',
    //     [0, 1, 2, 1, 0, 5, 1, 0, 3, 4, 5, 6, 1, 0, 0, 2, 0, 0, 1],
    //     'rgb(77,80,84)'
    // )
}
// 三折线图：
function proChart2(title, x, item1, data1, myColor1, item2, data2, myColor2, item3, data3, myColor3) {

    var dom = document.getElementById('threeMap');
    var myChart = echarts.init(dom);
    myChart.clear(); //主要是这行代码
    var option = {
        title: {
            text: title,
            // subtext: '国家和省市卫健委',
            textStyle: {
                fontSize: '16'
            },
            top: 15

        },
        grid: {
            left: '67px',
            right: '1%',
            left: '1%',
            bottom: '5%',
            top: '13%',
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis' // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
        },
        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'horizontal',
            data: ["确诊", "治愈", "死亡"],
            top: '15'
        },
        xAxis: [{
            type: 'category', //类目轴
            boundaryGap: false, // boundaryGap值为false的时候，折线第一个点在y轴上
            data: x,
            axisLine: {
                lineStyle: {
                    color: 'rgb(164,164,164)',
                }
            },

            axisLabel: {
                // fontSize: 12,
                rotate: 30 // 文本旋转角度
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            lineStyle: {
                width: 0.005
            }
        }],
        yAxis: [{
            type: 'value', //数值轴
            // axisLine: {
            // 	lineStyle: {
            // 		color: 'rgb(164,164,164)'
            // 	}
            // },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['rgb(164,164,164)'],
                    width: 0.1,
                    type: 'solid'
                }

            },
        }],
        series: [{

            name: item1,
            type: 'line', //图形类型
            symbolSize: 2, // 设置折线上圆点大小
            showSymbol: false,
            smooth: 0.5, // 设置折线弧度，取值：0-1之间
            data: data1,

            itemStyle: {
                normal: {
                    color: myColor1,
                    borderColor: myColor1, //拐点边框颜色
                    lineStyle: {
                        width: 1.5,
                        type: 'solid',

                    },
                }
            },

        },
            {

                name: item2,
                type: 'line', //图形类型
                symbolSize: 2, // 设置折线上圆点大小
                showSymbol: false,
                smooth: 0.5, // 设置折线弧度，取值：0-1之间
                data:data2,

                itemStyle: {
                    normal: {
                        color: myColor2,
                        borderColor: myColor2, //拐点边框颜色
                        lineStyle: {
                            width: 1.5,
                            type: 'solid',

                        },
                    }
                },

            },
            {

                name: item3,
                type: 'line', //图形类型
                symbolSize: 2, // 设置折线上圆点大小
                showSymbol: false,
                smooth: 0.5, // 设置折线弧度，取值：0-1之间
                data: data3,

                itemStyle: {
                    normal: {
                        color: myColor3,
                        borderColor: myColor3, //拐点边框颜色
                        lineStyle: {
                            width: 1.5,
                            type: 'solid',
                        },
                    }
                },

            }

        ]
    };
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);

}
function proChart1(item, x, y, myColor) {
    // console.log(x)
    // console.log(y)
    var dom = document.getElementById('threeMap');
    var myChart = echarts.init(dom);
    myChart.clear(); //主要是这行代码
    var option = {
        title: {
            text: province+"  "+item + "趋势",
            // subtext: '国家和省市卫健委'
            textStyle: {
                fontSize: '16'
            },
            top:15
        },
        grid: {
            left: '67px',
            right: '1%',
            left: '1%',
            bottom: '5%',
            top:'13%',
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis' // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
        },
        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'horizontal',
            data: ["" + item],
            top:'15'
        },
        xAxis: [{
            type: 'category', //类目轴
            boundaryGap: false, // boundaryGap值为false的时候，折线第一个点在y轴上
            data: x,
            axisLine: {
                lineStyle: {
                    color: 'rgb(164,164,164)',
                    width: 0.3, //这里是为了突出显示加上的
                }
            },
            axisLabel: {
                // fontSize: 12,
                rotate: 30 // 文本旋转角度
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            }
        }],
        yAxis: [{
            type: 'value', //数值轴
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle:{
                    color: ['rgb(164,164,164)'],
                    width: 0.1,
                    type: 'solid'
                }
            }
        }],
        series: [{
            name: item,
            type: 'line', //图形类型
            symbolSize: 2, // 设置折线上圆点大小
            showSymbol: false,
            smooth: 0.5, // 设置折线弧度，取值：0-1之间
            data: y,
            // markPoint: {
            //     data: [{
            //         type: 'max',
            //         name: '最大值'
            //     },
            //         {
            //             type: 'min',
            //             name: '最小值'
            //         }
            //     ]
            // },
            itemStyle: {
                normal: {
                    color: myColor,
                    borderColor: myColor, //拐点边框颜色
                    lineStyle:{
                        width:1.5,
                        type:'solid',

                    },
                }
            },

        },

        ]
    };
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
}
function makeChart1() {

    $.ajax({
        type: "get",
        url: "/getGruopPatientNumByTimeOutside",
        // data:{"province":""},
        dataType: "json",
        success: function(data)
        {
            // data=JSON.stringify(data)
            // console.log("折线图1"+data)
            // console.log(data.length)
            var x=[],y=[];
            for(var i=0;i<data.length;i++)
            {
                x[i]=data[i].xData;
                y[i]=data[i].yData;
            }
            chart1('新增病例', x,y, "rgb(255,116,95)")
        }
    })

}

function makeChart2() {
    $.ajax({
        type: "get",
        url: "/getGruopPatientNumByTime",
        dataType: "json",
        success: function(data)
        {
            // console.log("折线图2"+data)
            var x=[],y=[];
            for(var i=0;i<data.length;i++)
            {
                x[i]=data[i].xData;
                y[i]=data[i].yData;

            }
            chart1('新增境外输入', x, y, 'rgb(154,14,14)')
        }
    })

    // chart1('新增境外输入', [1, 2, 37, 8, 9, 4, 5, 6, 4, 5, 6], [1, 26, 7, 8, 9, 3, 4, 5, 4, 5, 6], 'rgb(154,14,14)')
}

function makeChart3() {
    $.ajax({
        type: "get",
        url: "/getProAndOutNum",
        dataType: "json",
        success: function(data)
        {
            console.log("柱状图3"+data)
            var x=[],y=[];
            for(var i=0;i<data.length;i++)
            {
                x[i]=data[i].xData;
                y[i]=data[i].yData;

            }
            chart3('境外输入累计确诊省Top10', x, y)
        }
    })
    // chart3('境外输入累计确诊省Top10', ['四川', '山东', '台湾', '台湾', '台湾', '台湾', '台湾', '台湾', '台湾', '台湾'], [1, 2, 37, 8, 9, 4, 5, 6,
    //     4, 5
    // ])
}
//第一个图
// 1.题目 2.x轴数据 3. y轴数据 4.color
function chart3(item, x, y) {
    var maxx = Math.max.apply(null, y);
    var dom = document.getElementById('threeMap');
    var myChart = echarts.init(dom);
    myChart.clear(); //主要是这行代码
    // echarts配置
    var option = {
        // 图表的标题
        title: {
            text: item,
            // subtext: '国家和省市卫健委',
            textStyle: {
                fontSize: '16'
            },
            top:15
        },
        grid: {
            left: '67px',
            right: '1%',
            left: '1%',
            bottom: '5%',
            top:'13%',
            containLabel: true,
        },
        // 提示框组件
        tooltip: {

            trigger: 'axis',

        },

        // 图例组件，可以展示不同系列的标记，颜色及名字，点击图例控制哪些系列不展示
        legend: {
            orient: 'horizontal',
            //系列的名称，与series中的系列名称name同步
            data: ['' + item]
        },
        // 直角坐标系X轴的数据
        xAxis: {
            type: 'category',
            data: x,
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgb(164,164,164)',
                    width: 0.3, //这里是为了突出显示加上的
                }
            },
        },
        // 直角坐标系Y轴的数据，类型默认value数值轴可以不写，数据可以写在series中
        yAxis: {
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle:{
                    color: ['rgb(164,164,164)'],
                    width: 0.1,
                    type: 'solid'
                }
            },
        },
        // 系列组件
        series: [{
            // 系列名称
            name: '境外输入',
            // 图形的类型
            type: 'bar',
            // Y轴的数据
            data: y,
            barWidth: 30,
            // 图形上的文本标签，可以用来说明图形的数据信息
            label: {
                show: true,
                // 标签旋转，正值逆时针
                rotate: 30
            },
            // // 最大值组件
            // markPoint: {
            // 	data: [{
            // 			name: '最大值',
            // 			type: 'max'
            // 		},
            // 		{
            // 			name: '最小值',
            // 			type: 'min'
            // 		}
            // 	]
            // },
            itemStyle: {
                normal: {
                    color: function(params) {

                        if (params.value <= maxx/2+1) {
                            return params.color = {
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [{ //只要修改前四个参数就ok
                                    offset: 0,
                                    color: 'rgb(243,162,99)'
                                }, //柱图渐变色
                                    {
                                        offset: 1,
                                        color: 'orange'
                                    }
                                ]
                            }
                        } else {
                            return params.color = {
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [{ //只要修改前四个参数就ok
                                    offset: 0,
                                    color: 'rgb(217,33,33)'
                                }, //柱图渐变色
                                    {
                                        offset: 1,
                                        color: 'red'
                                    }
                                ]
                            }
                        }
                    }
                }
                // color: new echarts.graphic.LinearGradient(
                // 	0, 1, 0, 0, [{ //只要修改前四个参数就ok
                // 			offset: 0,
                // 			color: 'red'
                // 		}, //柱图渐变色
                // 		{
                // 			offset: 1,
                // 			color: 'orange'
                // 		}
                // 	]
                // )
            }


        }]
    };
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
}

function chart1(item, x, y, myColor) {
    console.log(x)
    console.log(y)
    var dom = document.getElementById('threeMap');
    var myChart = echarts.init(dom);
    myChart.clear(); //主要是这行代码
    var option = {
        title: {
            text: item + "趋势",
            // subtext: '国家和省市卫健委'
            textStyle: {
                fontSize: '16'
            },
            top:15
        },
        grid: {
            left: '67px',
            right: '1%',
            left: '1%',
            bottom: '5%',
            top:'13%',
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis' // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
        },
        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'horizontal',
            data: ["" + item],
            top:'15'
        },
        xAxis: [{
            type: 'category', //类目轴
            boundaryGap: false, // boundaryGap值为false的时候，折线第一个点在y轴上
            data: x,
            axisLine: {
                lineStyle: {
                    color: 'rgb(164,164,164)',
                    width: 0.3, //这里是为了突出显示加上的
                }
            },
            axisLabel: {
                // fontSize: 12,
                rotate: 30 // 文本旋转角度
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            }
        }],
        yAxis: [{
            type: 'value', //数值轴
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle:{
                    color: ['rgb(164,164,164)'],
                    width: 0.1,
                    type: 'solid'
                }
            }
        }],
        series: [{
            name: item,
            type: 'line', //图形类型
            symbolSize: 2, // 设置折线上圆点大小
            showSymbol: false,
            smooth: 0.5, // 设置折线弧度，取值：0-1之间
            data: y,
            // markPoint: {
            //     data: [{
            //         type: 'max',
            //         name: '最大值'
            //     },
            //         {
            //             type: 'min',
            //             name: '最小值'
            //         }
            //     ]
            // },
            itemStyle: {
                normal: {
                    color: myColor,
                    borderColor: myColor, //拐点边框颜色
                    lineStyle:{
                        width:1.5,
                        type:'solid',

                    },
                }
            },

        },

        ]
    };
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
}